<template>
    <div class="perFrame">
        <div class="per_info">
            <img src="@/assets/images/head-0.png" alt="">
        </div>
        <hr>
        <mt-cell title="您的《手机账户》信息">
            <img slot="icon" src="@/assets/images/iphone.png" width="24" height="24">
            <p>{{phone}}</p>
        </mt-cell>
        <mt-cell title="查询《个人账户》信息" is-link to="/user_info">
            <img slot="icon" src="@/assets/images/find.png" width="24" height="24">
        </mt-cell>
        <mt-cell title="修改《健康打卡》信息" is-link to="/user_edit_heal">
            <img slot="icon" src="@/assets/images/edit.png" width="24" height="24">
        </mt-cell>
        <mt-cell title="修改《夜晚签到》信息" is-link to="/user_edit_night">
            <img slot="icon" src="@/assets/images/edit.png" width="24" height="24">
        </mt-cell>
        <mt-button v-if="exitBtn" type="primary" size="large" v-on:click="exitLogin" plain>退出登录</mt-button>
        <div class="btnPos">
            <!-- <router-link to="/login"> -->
                <mt-button type="primary" size="large" v-on:click="login">登录</mt-button>
            <!-- </router-link> -->
            <mt-button type="primary" size="large" v-on:click="register" plain>注册</mt-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'User',
    data() {
        return {
            uid: 0,
            phone: '',
            exitBtn: false
        }
    },
    methods: {
        login() {
            this.$router.push('/login');
        },
        register() {
            this.$router.push('/register');
        },
        getUserInfoFake() {
            let pseudoData = require('./pseudoData.json');
            this.phone = pseudoData.data.phone;
            // console.log(pseudoData.data);
        },
        exitLogin() {
            fetch(this.url+"/user/deletesession",{
                credentials: 'include',
                method: 'POST'
            }).then((res)=>{return res.text()})
            .then(()=>{
                window.location.reload();
            }).catch(function(err) {
                console.error(err);
            });
        }
    },
    created() {
        fetch(this.url+"/user/userinfo",{
            credentials: 'include',
            method: 'POST'
        }).then((res)=>{return res.text()})
        .then((value)=>{
            value = JSON.parse(value);
            if(value["data"][0].uid) {
                this.uid = value["data"][0].uid;
                this.phone = value["data"][0].phone;
                document.querySelector(".btnPos").style.display = "none";
                this.exitBtn = true;
            }
        }).catch(function(err) {
            console.error(err);
        });
    }
}
</script>

<style scoped>
    .perFrame {
        position: relative;
        height: 50%;
    }
    .per_info {
        height: 100px;
        text-align: center;
    }
    .per_info img {
        height: 100px;
        width: 100px;
        border-radius:50px;
    }
    .btnPos {
        position: relative;
        top: 20%;
    }
    .btnPos button {
        width: 90%;
        margin: 10px 20px 0 20px;
    }
</style>